<!DOCTYPE html>
<html>
  <head>
<title>Konversi Kode</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
 $('a#convert').click(function() {
  $('textarea#codes').val(
   $('textarea#codes').val()
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;")
  ).focus().select();
  return false;
 });
 $('a#clear').click(function() {
  $('textarea#codes').val('').focus().select();
  return false;
 });
});
</script>

<style type='text/css'>
* {
    margin: 0;
    padding: 0
    }
body {
    background: #def
}
.konv {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    padding: 10px 0
    }
.konv a.betton {
    font: bold 15px/20px Arial, sans-serif;
    text-transform: uppercase;
    padding: 5px;
    border: 2px solid #DADADA;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: 0 auto;
    text-decoration: none;
    color: #eee;
    cursor: pointer;
    display: inline;
    margin-left: 5px;
    background: #7d7e7d;
    -moz-box-shadow: 0 0 2px #000;
    -webkit-box-shadow: 0 0 2px #000;
    box-shadow: 0 0 2px #000;
    background: #7d7e7d;
    background: -moz-linear-gradient(top, #7d7e7d 0%, #3f3f3f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#3f3f3f)); 
    background: -webkit-linear-gradient(top, #7d7e7d 0%,#3f3f3f 100%);
    background: -o-linear-gradient(top, #7d7e7d 0%,#3f3f3f 100%);
    background: -ms-linear-gradient(top, #7d7e7d 0%,#3f3f3f 100%); 
    background: linear-gradient(top, #7d7e7d 0%,#3f3f3f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#3f3f3f',GradientType=0 ); 
    }
@media screen and (max-width: 320px) { 
.konv a.betton {
    font: bold 13px/20px Arial, sans-serif;
    margin: 10px auto 0;
    display: block;
    width: 90px
    }
}
</style>
</head>
<body>
<textarea id="codes" placeholder="Tulis / paste kode anda disini" style="display: block; height: 150px; margin: 10px auto; width: 99%;"></textarea>
<div class="konv">
<a class="betton" id="convert">Konversi</a><a class="betton" id="clear">Bersihkan</a></div>
</body>
</html>